<template>
  <div class="app-container">
    <div class="change">
      <!-- <p style="justify-content: flex-end;">
        <el-radio v-model="tempData.status" label="1">进货单</el-radio>
        <el-radio v-model="tempData.status" label="2">退货单</el-radio>
      </p> -->
      <p>
        <span>单据日期</span>
        <el-date-picker v-model="tempData.purchaseTime" type="date" disabled value-format="yyyy-MM-dd" class="userselect" placeholder="选择日期"></el-date-picker>
      </p>
			<p>
			  <span>单据号</span>
			  <el-input v-model="tempData.invoices" class="userselect" type="text" disabled/>
			</p>
      <p>
        <span>供应商</span>
        <el-input v-model="tempData.supplierId" class="userselect" type="text" disabled/>
      </p>
      <p>
        <span>采购部门</span>
        <el-input v-model="tempData.departments" class="userselect" type="text" disabled/>
      </p>
      <p>
        <span>采购员</span>
        <el-input v-model="tempData.operator" class="userselect" type="text" disabled/>
      </p>
			<p>
			  <span>采购类型</span>
			  <el-input v-model="tempData.purchaseType" class="userselect" type="text" disabled/>
			</p>
      <p>
        <span>发运方式</span>
        <el-input v-model="tempData.transports" class="userselect" type="text" disabled/>
      </p>
			<p>
			  <span>采购总金额</span>
			  <el-input v-model="tempData.allMoney" class="userselect" type="text" disabled/>
			</p>
    </div>
    <!-- 产品数据 -->
    <div class="zd3-btm">
     <el-table :data="proData" :show-header="true" style="width: 100%;border-radius: 8px;">
       <el-table-column type="index" label="序号" align="center" width="80" />
       <el-table-column align="center" label="名称" width="150">
         <template slot-scope="scope">
           <input v-model="scope.row.commodityName" :class="scope.row.ischeck ? 'inps-active' : 'inps'"  type="text" :disabled="!scope.row.ischeck"/>
         </template>
       </el-table-column>
       <el-table-column align="center" label="频率" width="150">
         <template slot-scope="scope">
           <input v-model="scope.row.frequencys" :class="scope.row.ischeck ? 'inps-active' : 'inps'"  type="text" :disabled="!scope.row.ischeck"/>
         </template>
       </el-table-column>
       <el-table-column align="center" label="润滑方式" width="150">
         <template slot-scope="scope">
           <input v-model="scope.row.lubrication" :class="scope.row.ischeck ? 'inps-active' : 'inps'"  type="text" :disabled="!scope.row.ischeck"/>
         </template>
       </el-table-column>
       <el-table-column align="center" label="数量" width="150">
         <template slot-scope="scope">
           <input v-model="scope.row.num" :class="scope.row.ischeck ? 'inps-active' : 'inps'"  type="text" :disabled="!scope.row.ischeck"/>
         </template>
       </el-table-column>
       <el-table-column align="center" label="参数" width="150">
         <template slot-scope="scope">
           <input v-model="scope.row.parameters" :class="scope.row.ischeck ? 'inps-active' : 'inps'"  type="text" :disabled="!scope.row.ischeck"/>
         </template>
       </el-table-column>
     	<el-table-column align="center" label="单重" width="150">
     	  <template slot-scope="scope">
     	    <input v-model="scope.row.pieceWeight" :class="scope.row.ischeck ? 'inps-active' : 'inps'"  type="text" :disabled="!scope.row.ischeck"/>
     	  </template>
     	</el-table-column>
     	<el-table-column align="center" label="功率" width="150">
     	  <template slot-scope="scope">
     	    <input v-model="scope.row.powers" :class="scope.row.ischeck ? 'inps-active' : 'inps'"  type="text" :disabled="!scope.row.ischeck"/>
     	  </template>
     	</el-table-column>
     	<el-table-column align="center" label="转/分" width="150">
     	  <template slot-scope="scope">
     	    <input v-model="scope.row.revolutionsPerMinute" :class="scope.row.ischeck ? 'inps-active' : 'inps'"  type="text" :disabled="!scope.row.ischeck"/>
     	  </template>
     	</el-table-column>
     	<el-table-column align="center" label="材质" width="150">
     	  <template slot-scope="scope">
     	    <input v-model="scope.row.texture" :class="scope.row.ischeck ? 'inps-active' : 'inps'"  type="text" :disabled="!scope.row.ischeck"/>
     	  </template>
     	</el-table-column>
       <el-table-column align="center" label="单价" width="150">
         <template slot-scope="scope">
           <input v-model="scope.row.unitPrice" :class="scope.row.ischeck ? 'inps-active' : 'inps'"  type="text" :disabled="!scope.row.ischeck"/>
         </template>
       </el-table-column>
       <el-table-column align="center" label="采购金额" width="150">
         <template slot-scope="scope">
           <input v-model="scope.row.unitPrice*scope.row.num" :class="scope.row.ischeck ? 'inps-active' : 'inps'"  type="text" :disabled="!scope.row.ischeck"/>
         </template>
       </el-table-column>
       <el-table-column align="center" width="150" label="操作" fixed="right" v-if="!islook">
         <template slot-scope="scope">
          <el-button type="text" size="small" @click="addProfile(scope.row,scope.$index)">添加资料</el-button>
           <!-- <el-popconfirm
             placement="top"
             hideIcon
             title="是否要删除此行？"
             @onConfirm="deleteRow(scope.row,scope.$index)"
           >
             <el-button type="text" size="small" slot="reference">删除</el-button>
           </el-popconfirm> -->
         </template>
       </el-table-column>
     </el-table>
    </div>
		<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" :modal-append-to-body="false" :modal="true" width="60%">
		  <div class="fileup">
		  	<div class="uping" v-for="(item,index) in fileNum" :key="index">
		  			<p>
		  			  <span>资料名</span>
		  			  <input v-model="item.filename" type="text" placeholder="请输入您要上传的资料名" />
		  			</p>
		  			<p>
		  			  <span>上传资料</span>
		  			  <el-upload
		  			    class="upload-demo"
		  			    drag
		  					:data="index"
								:show-file-list="false"
		  					:http-request="designUpFile"
		  			    action=""
		  			    :multiple='false'
		  					limit='1'
		  			    >
		  			    <i class="el-icon-upload"></i>
		  			    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
		  			  </el-upload>
							<p style="margin: 0;">
								<strong v-if="item.filePath">{{item.filename}}</strong>
								<strong v-if="item.filePath" @click="downLoad(item.filePath)">下载<i class="el-icon-download" /></strong>
							</p>
		  			</p>
		  	</div>
		  </div>
		  <div slot="footer" class="dialog-footer">
				<el-button type="success" @click="addfile">新增资料</el-button>
		    <el-button @click="dialogVisible = false">取消</el-button>
		    <el-button type="primary" @click="save">保存</el-button>
		  </div>
		</el-dialog>
		<div class="submits" v-if="!islook">
			<div class="save" @click="saveOrder">转交入库</div>
			<div class="nosave" @click="nosaveOrder">取消</div>
		</div>
		<div class="submits" v-else>
		  <div class="add" @click="back">返回</div>
		</div>
  </div>
</template>

<script>
import { uploadFile,addPeople,getUserFiles } from '@/api/people'
import { updateCaigouHeader } from '@/api/caigou'
import { inStock } from '@/api/cangku'
let proid = null,tempindex = null;
export default {
  data(){
    return {
      tempData: {
        bumen: "",
        invoices: "",    //发票
        operator: "",    //操作人员
        oneid: '',
        djtime: '',
        supplier: '',     //供应商
        purchasetype: '1',   //采购类型
        // companyName: "",
      },
      proData: [],  //商品列表
      fileNum: [{
        filename: ''
      }],
			uploadOver: true,
			dialogVisible: false,
			islook: false
    }
  },
  mounted(){
    console.log(this.$route.params)
    this.tempData = JSON.parse(this.$route.params.options)
    console.trace('tempData:',this.tempData)
    this.proData = this.tempData.listsCommodity
		if(this.$route.params.look){
			this.islook = true
		}else{
			this.islook = false
		}
  },
  methods:{
		// 确认入库操作
    saveOrder(){
			this.tempData.statics = 3
			delete this.tempData.insertTime
			delete this.tempData.updateTime
			delete this.tempData.listsCommodity
			updateCaigouHeader(this.tempData).then(res => {
			  console.log(res)
			  this.$message({
			    message: res.message,
			    type: 'success'
			  })
			  this.$router.go(-1)
			})
    },
		save(){
			this.dialogVisible = false
		},
    nosaveOrder(){
			this.$router.go(-1)
    },
		addProfile(item,index){
			// 获取用户文档信息
			console.log(item)
			console.log('tempdata',this.tempData)
			// return
			this.dialogVisible = true
			// 上传资料id改变，变为表头id，商品id暂时不能用
			proid = item.warehouseId
			getUserFiles({parentId: this.tempData.purchaseId}).then(res => {
				console.log(res)
				if(res.data.list.length != 0){
					this.fileNum = []
					res.data.list.map(item => {
						this.fileNum.push({
							filename: item.fileDescribe,
							filePath: item.fileName
						})
					})
				}else{
					if(tempindex != index){
						this.fileNum = [{
						  filename: '',
							filePath: ''
						}]
					}
				}
			})
			tempindex = index
		},
    addfile(){
      this.fileNum.push({
				filename: ''
			})
			this.uploadOver = false
    },
		back(){
			this.$router.go(-1)
		},
		choseFile(){
			
		},
		downLoad(filepath){
			window.location.href = filepath
		},
		// 确认上传入库单文件
		// subfile(data,index){
		// 	this.$refs.upload.submit();
		// 	console.log(index)
		// 	console.log(data)
		// 	this.designUpFile().then(res => {
		// 		console.log('res',res)
		// 	})
		// 	console.log(item)
		// 	if(item){
		// 		var formData = new FormData();
		// 		formData.append("file", item.file)
		// 		formData.append('content', data.filename)
		// 		uploadFile(formData).then(res => {
		// 		  console.log(res)
		// 		  addPeople({fileName: res,fileDescribe:data.filename}).then(res => {
		// 		    console.log(res)
		// 		    this.$message({
		// 		      showClose: true,
		// 		      message: '添加成功',
		// 		      type: "success"
		// 		    })
		// 		  })
		// 		})
		// 	}else{
		// 		this.$message({
		// 			message: '请先完善要上传得资料！',
		// 			type: 'warning'
		// 		})
		// 	}
		// },
		upload(index){
			console.log(index)
		},
		// 上传入库单文件
		designUpFile(item) {
			console.log('item')
			console.log(item)
			var formData = new FormData();
			formData.append("file", item.file)
			formData.append('content', this.fileNum[item.data].filename)
			uploadFile(formData).then(res => {
			  console.log(res)
				this.fileNum[item.data].filePath = res
				this.$forceUpdate()
				this.uploadOver = true
			  addPeople({fileName: res,fileDescribe:this.fileNum[item.data].filename,parentId: this.tempData.purchaseId}).then(res => {
			    console.log(res)
			    this.$message({
			      showClose: true,
			      message: '添加成功',
			      type: "success"
			    })
			  })
			})
		},
  }
}
</script>

<style lang="scss" scoped>
.popup {
  padding: 0 20px;
}
.disable{
	pointer-events: none;
	background: #808080 !important;
}
.fileup{
	border: none !important;
	background: none;
}
.product{
  display: flex;
  .pro-l{
    width: 200px;
  }
  .pro-r{
    flex: 1;
    overflow: hidden;
    /deep/.el-table--enable-row-hover .el-table__body tr:hover>td {
      background-color: rgba(24,160,94,.2);
    }
    /deep/.el-table tr{
      cursor: pointer;
    }
    /deep/.el-table__body tr.current-row>td {
      background-color: rgba(24,160,94,.4);
    }
  }
}
.files {
  display: flex;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  margin-top: 20px;
  overflow: hidden;
  padding: 20px;
}
.files-btm .btn-prev:after {
  content: "上一页";
}
.files-btm .btn-next:before {
  content: "下一页";
}
.files-btm .btn-prev,
.files-btm .btn-next {
  width: 65px;
}
.files-left {
	width: 160px;
	margin-right: 20px;
	/deep/.el-menu{
		border-right: none;
	}
	/deep/.el-menu-item{
		height: 35px;
		line-height: 35px;
		margin-bottom: 8px;
	}
	/deep/.el-menu-item.is-active{
		color: #fff;
		border-radius: 5px;
		background: rgba(24,160,94,.8);
	}
}
.files-right {
  flex: 1;
  overflow: hidden;
}
.files-btm {
  background: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  // margin-top: 20px;
  overflow: hidden;
  &-title {
    display: flex;
    align-items: center;
    height: 45px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    > p {
      text-align: center;
      font-size: 16px;
      color: #333;
    }
  }
  .addDate {
    margin: 20px 32px 10px 32px;
    height: 32px;
    border-radius: 3px;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    border: 1px dashed rgba(0, 0, 0, 0.3);
  }
  .el-button--text {
    margin: 0 15px;
  }
}
.avatar{
	width: 30px;
	height: 30px;
}
.zd3-btm {
  background: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 10px;
  overflow: hidden;
  &-title {
    display: flex;
    align-items: center;
    height: 70px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    > p {
      text-align: center;
      font-size: 16px;
      color: #333;
    }
  }
  .addDate {
    margin: 20px 32px 10px 32px;
    height: 32px;
    border-radius: 3px;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    border: 1px dashed rgba(0, 0, 0, 0.3);
  }
  .el-button--text {
    margin: 0 15px;
  }
}
.inps {
  width: 95%;
  height: 32px;
  line-height: 32px;
  padding-left: 10px;
  background: none;
  border: none;
  color: rgba(0, 0, 0, 0.8);
}
.inps-active {
  width: 95%;
  height: 32px;
  line-height: 32px;
  padding-left: 10px;
  background: rgba(24,160,94,.2);
  border: none;
  color: rgba(0, 0, 0, 0.8);
}
.change {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  > p {
    width: 25%;
    font-size: 14px;
    display: flex;
    align-items: center;
    color: #333;
    /deep/.el-input__inner {
      // width: inherit;
      background: none;
      height: 32px;
      // line-height: 32px;
      color: #333;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding: 0 25px;
    }
    /deep/.el-input__icon {
      line-height: 32px;
    }
    .userselect {
      // max-width: 250px;
      flex: 1;
    }

    > span {
      display: block;
      width: 120px;
      text-align: right;
      padding-right: 15px;
    }
    > input {
      width: inherit;
      flex: 1;
      height: 32px;
      border-radius: 3px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding-left: 10px;
      color: #333;
    }
  }
}
.submits{
	// position: absolute;
	// bottom: 20px;
	// right: 0;
	display: flex;
	background: #ffffff;
	padding: 15px 20px;
	justify-content: flex-end;
	align-items: center;
	>div{
		width: 80px;
		height: 32px;
		text-align: center;
		line-height: 32px;
		color: #fff;
		font-size: 14px;
		border-radius: 4px;
		margin-left: 30px;
		cursor: pointer;
	}
  .add{
    background: #18A05E;
  }
	.save{
		background: #2196F3;
	}
	.nosave{
		background: #999;
	}
}
.submits1{
	position: absolute;
	bottom: 20px;
	right: 0;
	display: flex;
	background: #ffffff;
	padding: 15px 20px 0;
	justify-content: flex-end;
	align-items: center;
	>div{
		width: 80px;
		height: 32px;
		text-align: center;
		line-height: 32px;
		color: #fff;
		font-size: 14px;
		border-radius: 4px;
		margin-left: 30px;
		cursor: pointer;
	}
	.add{
	  background: #18A05E;
	}
}

.subs{
	display: flex;
	.subFile{
		width: 80px;
		height: 32px;
		text-align: center;
		line-height: 32px;
		color: #fff;
		font-size: 14px;
		border-radius: 4px;
		margin-left: 100px;
		cursor: pointer;
		background: #18A05E;
	}
}
.fileup{
	position: relative;
	height: 400px;
	overflow-y: auto;
  padding: 20px 0 60px 0;
  background: #fff;
  border-radius: 8px;
  // margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
  // align-items: center;
  justify-content: space-between;
	.uping{
		width: 50%;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		> p {
		  width: 90%;
		  font-size: 14px;
		  display: flex;
			flex-wrap: wrap;
		  align-items: center;
		  color: #333;
		  /deep/.el-input__inner {
		    // width: inherit;
		    background: none;
		    height: 32px;
		    // line-height: 32px;
		    color: #333;
		    border: 1px solid rgba(0, 0, 0, 0.1);
		    padding: 0 25px;
		  }
		  /deep/.el-input__icon {
		    line-height: 32px;
		  }
		  /deep/.el-upload-dragger {
				width: 100%;
		    height: 100px;
		  }
		  /deep/.el-upload-dragger .el-icon-upload {
		    font-size: 60px;
		    color: #C0C4CC;
		    margin: 0; 
		    line-height: 1;
				width: 100%;
		  }
			/deep/.el-upload {
				width: 100%;
			}
		  .userselect {
		    // max-width: 250px;
		    flex: 1;
		  }
		
		  > span {
		    display: block;
		    width: 100px;
		    text-align: right;
		    padding-right: 15px;
		  }
		  > input {
		    width: inherit;
		    flex: 1;
		    height: 32px;
		    border-radius: 3px;
		    border: 1px solid rgba(0, 0, 0, 0.1);
		    padding-left: 10px;
		    color: #333;
		  }
			>strong{
				display: inline-block;
				padding-left: 100px;
				font-weight: 100;
				font-size: 14px;
				&:last-child{
					cursor: pointer;
					color: #13ce66;
					font-weight: 600;
				}
			}
		  >div{
		    width: inherit;
		    flex: 1;
		  }
		}
	}
}
@media screen and (max-width: 1400px) {
  .change > p {
    width: 33%;
  }
}
</style>